<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-form :inline="true" :model="queryData">
          <el-form-item label="借款时间">
            <el-form-item prop="begin">
              <el-date-picker type="date" placeholder="选择借款日期" v-model="queryData.begin"
                              style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-form-item>

          <el-form-item label="还款时间">
            <el-form-item prop="end">
              <el-date-picker type="date" placeholder="选择还款日期" v-model="queryData.end"
                              style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-form-item>

          <el-form-item label="借款人" prop="debtor" >
            <el-input v-model="queryData.debtor"></el-input>
          </el-form-item>

          <el-form-item label="还款人" prop="payer" >
            <el-input v-model="queryData.payer"></el-input>
          </el-form-item>


          <el-form-item>
            <el-button type="primary" icon="search" @click="query()">查询</el-button>
            <el-button @click="refresh()" type="primary" icon="search"> 查询所有</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="debtor" label="欠款人" width="200"></el-table-column>
      <el-table-column prop="payer" label="还款人" width="200"></el-table-column>
      <el-table-column prop="begin" label="借款日期" width="200"></el-table-column>
      <el-table-column prop="end" label="还款日期" width="200"></el-table-column>
      <el-table-column prop="money" label="金额" width="200"></el-table-column>

      <el-table-column label="操作" width="188">
        <template slot-scope="scope">
          <el-button @click="edit(scope.row)" type="text" size="small">修改</el-button>
          <el-button @click="del(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
  </div>
</template>

<script>

  export default {
    name: 'debt',
    methods: {
      refresh() {
        window.location.reload();
      },
      edit(row) {
        this.$router.push({
          path: '/updateDept',
          query: {
            data: row
          }
        })
      },
      del(row) {
        let _this = this;
        _this.$confirm('此操作将永久删除数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.get("/delDebt/" + row.did).then(resp => {
            if (resp.data === 'success') {
              _this.$alert('删除成功！', '消息', {
                confirmButtonText: '确定',
                callback: action => {
                  window.location.reload()
                }
              })
            }
          })
        }).catch(() => {
          _this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

      },
      query() {
        let para = {
          userId: this.queryData.userId,
          begin: this.queryData.begin,
          end: this.queryData.end,
          debtor: this.queryData.debtor,
          payer: this.queryData.payer,
        };
        let _this = this;
        console.log(para);
        this.$axios.post("/queryDe", para).then(resp => {
          console.log(resp.data)
          _this.tableData = resp.data;
        })
      }
    },


    data() {
      return {
        queryData: {
          begin: '',
          end: '',
          debtor: '',
          payer: '',
          money: '',
          userId: '',
          did: '',
        },
        tableData: [{
          begin: '',
          end: '',
          debtor: '',
          payer: '',
          money: '',
          did: '',
        }]
      }
    },
    created() {
      let _this = this;
      this.$axios.get("/debt/" + this.$store.state.user.username).then(resp => {
        _this.tableData = resp.data;
        // console.log(resp.data)
      });

      this.$axios.get("/user/" + this.$store.state.user.username).then(resp => {
        _this.queryData.userId = resp.data;
      });
    }
  }
</script>

<style scoped>
</style>

